<!DOCTYPE>
<html>

<head>
    <title>云课堂</title>

    
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link href="css/ts.css" rel="stylesheet">
    <style>
        #top > div {
            height: 40px;
            line-height: 40px;
           
            
        }
        
        #login-area > form input {
            width: 150px;
        }
        
        #func-panel > div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 5px;
            display: none;
        }
        
        #func-bread ol li:first-child::before {
            content: '当前位置： ';
        }
        
        .list-group a {
            border-radius: 0 0 !important;
        }
        
        #func-menu > div {
            text-align: center;
        }
        body{
            background-image: url(picture/back.jpg);
        }
    </style>
</head>

<body>
    <div class="container-fluid" style="position: absolute;top:0;right:0;bottom:0;left:0;">
        <img src="picture/top.png" alt="aa" class="top">
        <!-- 登陆栏 -->
        <div class="row" style="overflow: hidden;height:40px;line-height: 40px;" id="top">
            <div style="float:left;">
                
                <a href="index.html" class="title"><em><img src="picture/class.jpg" alt="class" style="height: 50">云课堂</em></a>           
            </div>
             
            <div style="float:right;" id="login-area">
                <form class="form-inline">
                     <img src="picture/ren.png" alt="用户" style="max-width:40">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="输入用户名" style="background:transparent;border:1px solid #ffffff">
                    </div>
                    <div class="form-group">
                        <label for="passwd">密码</label>
                        <input type="password" class="form-control" id="passwd" placeholder="输入密码" style="background:transparent;border:1px solid #ffffff">
                    </div>   
                    <button type="submit" class="btn btn-default" onclick="window.open('loading.html')">登陆</button>
                    <button type="submit" class="btn btn-default" onclick="window.open('zhuce.html')">注册</button>
                </form>
            </div>
        </div>

        <!-- 内容 -->
        <div style="position: absolute; top:141px;right:0;bottom:0;left:0; overflow: hidden;">
            <div style="float: left;width:5%;height: 100%;" id="func-menu">
                <div class="list-group">
                    <a href="#" class="list-group-item"><em>课程</em></a>
                    <a href="#" class="list-group-item"><em>作业</em></a>
                    <a href="#" class="list-group-item"><em>答疑</em></a>
                    <a href="#" class="list-group-item"><em>个人</em></a>
                </div>             
            </div>
            <div style="float: left;width:95%;height: 100%; position: relative;">
                <div class="row" style="margin:0px; padding-bottom: 0;" id="func-bread">
                    <ol class="breadcrumb" style="margin:0; background-color: beige; border-radius: 0 0 !important;">
                        <li>
                            <a href="#"></a>
                        </li>
                    </ol>
                </div>
                <!-- 各个功能面板 -->
                <div id="func-panel" style="position: absolute;top:37px;right:0;bottom:0;left:0;">                 
                    
                <!-- 课程功能面板 -->
                    <div id="func-panel-course">
                     <input type="text" class="search" id="search" placeholder="搜索课程名字">
                     <button type="搜索" class="btn btn-default btn-lg active" style="background-color: aquamarine">搜索课程</button>
                      
                        <div>
                        <ul class="shuzhe"style="right:100px">
			                     <li><A class="hover" href="#">小葵花</A></li>
			                     <li><A href="#">妈妈</A></li>
			                     <li><A href="#">课堂</A></li>
			                     <li><A href="#">开课了</A></li>
			                     <li><A href="#">你觉的</A></li>
			                     <li><A href="#">电子竞技</A></li>
			                     <li><A href="#">需要视力</A></li>
			                     <div id="lanPos"></div>
                        </ul>
                       </div>  
                    </div>  
                    
                    <!-- 作业功能面板 -->
                    <div id="func-panel-homework" class="daohang">
                        <nav class="navbar navbar-default" role="navigation">
	                       <div class="container-fluid">
	                           <div class="navbar-header">
		                          <ul class="nav navbar-nav">
                                        <li><a href="#">小葵花</a></li>
			                             <li><a href="#">妈妈</a></li>
			                             <li><a href="#">课题</a></li>
			                             <li><a href="#">开课了</a></li>
                                        <li><a href="#">你要上哪个</a></li>
                                        <li><a href="#">作业</a></li>
                                </ul>
                              </div>
                          </div>
                        </nav>
                    </div>
                    
                    <!-- 答疑功能面板 -->
                    <div id="func-panel-question">
                        答疑内容
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.1.1.min.js"></script>
    
    <script>
        $(function() {
            // 菜单栏点击切换
            $('#func-menu a').on('click', function() {
                $(this).addClass('active').siblings().removeClass('active');
                switch_menu_extra($(this));
            });

            $('#func-menu a').eq(0).trigger('click');
        });

        // 点击切换
        function switch_menu_extra(obj) {
            $('#func-bread ol li').eq(0).text(obj.text());
            var panel = null;
            switch (obj.text()) {
                case '课程':
                    panel = $('#func-panel-course');
                    break;
                case '作业':
                    panel = $('#func-panel-homework');
                    break;
                case '答疑':
                    panel = $('#func-panel-question');
                    break;
            }

            if (panel != null) {
                panel.show().siblings().hide();
            }
        }
    </script>
</body>

</html>
